<app-content-header
  [action]="aclService.canAbility('api.post.camel.menu.one') && action"
  (actionClick)="goNew()">
  <ng-template #action>
    <i nz-icon type="plus"></i> {{ 'BTN.ADD' | translate }}
  </ng-template>
</app-content-header>

<div class="cil-table-block">
  <nz-card [nzBordered]="false" [nzTitle]="'MENUS.TITLE' | i18n" [nzCover]="coverTemplate">
    <nz-card-meta [nzTitle]="'GENERAL.INFO.OPERATION_TIPS' | i18n" [nzDescription]="description"></nz-card-meta>
    <ng-template #description>
      <ul>
        <li>{{'MENUS.OPERATION.DRAG' | i18n}}</li>
        <li>{{'MENUS.OPERATION.RIGHT_CLICK' | i18n}}</li>
      </ul>
    </ng-template>

  </nz-card>
  <ng-template #coverTemplate>
    <div class="cil__tree--form">
      <nz-input-group [nzSuffix]="suffixIcon">
        <input type="text" nz-input placeholder="Search" [(ngModel)]="searchValue" />
      </nz-input-group>
      <ng-template #suffixIcon>
        <i nz-icon nzType="search"></i>
      </ng-template>
    </div>
    <nz-spin [nzSpinning]="isLoading">
      <div class="cil__tree--container">
        <nz-tree
          #tree
          nzShowLine
          nzBlockNode
          [nzDraggable]="aclService.canAbility('api.put.camel.menus.ordinal')"
          [nzSearchValue]="searchValue"
          [nzData]="nodes"
          [nzExpandedKeys]="expandedKeys"
          (nzOnDrop)="onNodeDropEvent($event)"
          (nzContextMenu)="onContextClick($event, tplMenu)">
        </nz-tree>
      </div>
    </nz-spin>
  </ng-template>
  <ng-template #tplMenu>
    <ul nz-menu nzInDropDown>
      <li
        acl [acl-ability]="'api.put.camel.menus.ordinal'"
        nz-menu-item
        (click)="onMenuCopy($event)">{{'BTN.COPY' | i18n}}</li>
      <li
        acl [acl-ability]="'api.put.camel.menus.ordinal'"
        nz-menu-item
        (click)="onMenuPromote($event)">{{'MENUS.BTN.CREATE_CHILD' | i18n}}</li>
      <li
        acl [acl-ability]="'api.put.camel.menus.ordinal'"
        nz-menu-item
        (click)="onMenuRemove($event)">{{'BTN.DELETE' | i18n}}</li>
    </ul>
  </ng-template>
</div>
